import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { 
  FileText, Video, Image, Presentation, HelpCircle, List, Cloud, 
  MessageSquare, BarChart3, Users, BookOpen, ExternalLink, Palette,
  Target, Type
} from 'lucide-react';

const iconMap = {
  'FileText': FileText,
  'Video': Video,
  'Image': Image,
  'Presentation': Presentation,
  'HelpCircle': HelpCircle,
  'List': List,
  'Cloud': Cloud,
  'MessageSquare': MessageSquare,
  'BarChart3': BarChart3,
  'Users': Users,
  'BookOpen': BookOpen,
  'ExternalLink': ExternalLink,
  'Palette': Palette,
  'Target': Target,
  'Type': Type,
};

interface N8nStyleNodeProps {
  data: {
    label: string;
    subtitle: string;
    icon: string;
    category: string;
  };
  selected: boolean;
}

export const N8nStyleNode = memo(({ data, selected }: N8nStyleNodeProps) => {
  const Icon = iconMap[data.icon as keyof typeof iconMap] || FileText;
  
  const getCategoryColor = (category: string) => {
    switch (category) {
      case 'interactive':
        return {
          bg: '#f8f9ff',
          border: '#6366f1',
          iconBg: '#e0e7ff',
          iconColor: '#6366f1'
        };
      case 'quiz':
        return {
          bg: '#f0f9ff',
          border: '#0ea5e9',
          iconBg: '#dbeafe',
          iconColor: '#0ea5e9'
        };
      case 'content':
        return {
          bg: '#fafafa',
          border: '#6b7280',
          iconBg: '#f3f4f6',
          iconColor: '#6b7280'
        };
      case 'integrations':
        return {
          bg: '#fdf4ff',
          border: '#a855f7',
          iconBg: '#f3e8ff',
          iconColor: '#a855f7'
        };
      default:
        return {
          bg: '#fafafa',
          border: '#6b7280',
          iconBg: '#f3f4f6',
          iconColor: '#6b7280'
        };
    }
  };

  const colors = getCategoryColor(data.category);

  return (
    <div 
      className="n8n-style-node"
      style={{ 
        borderColor: selected ? colors.border : '#e2e8f0',
        background: selected ? colors.bg : '#ffffff',
        boxShadow: selected ? `0 0 0 2px ${colors.border}20` : 'none'
      }}
    >
      {/* Four connection handles */}
      <Handle
        type="target"
        position={Position.Top}
        id="top"
        className="n8n-handle"
      />
      <Handle
        type="source"
        position={Position.Bottom}
        id="bottom"
        className="n8n-handle"
      />
      <Handle
        type="target"
        position={Position.Left}
        id="left"
        className="n8n-handle"
      />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        className="n8n-handle"
      />

      {/* Node content */}
      <div className="flex items-center gap-3 p-3">
        <div 
          className="p-2 rounded-lg flex items-center justify-center flex-shrink-0"
          style={{ 
            backgroundColor: colors.iconBg,
            color: colors.iconColor
          }}
        >
          <Icon className="w-4 h-4" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="text-sm font-medium text-slate-900 leading-tight">
            {data.label}
          </div>
          <div className="text-xs text-slate-500 leading-tight mt-0.5">
            {data.subtitle}
          </div>
        </div>
      </div>
    </div>
  );
});

N8nStyleNode.displayName = 'N8nStyleNode';